<template>
  <div class="ViewSwitch">
    <!-- <div class="title">视图切换：</div> -->
    <div class="icons">
      <div class="icon-con">
        <img
          :src="require('../assets/img/allView.png')"
          alt="总览视图"
          title="总览视图"
          @click="toAllClick()"
        />
      </div>
      <div class="icon-con">
        <img
          :src="require('../assets/img/frontView.png')"
          alt="主视图"
          title="主视图"
          @click="toFrontClick()"
        />
      </div>
      <div class="icon-con">
        <img
          :src="require('../assets/img/rightView.png')"
          alt="侧视图"
          title="侧视图"
          @click="toRightClick()"
        />
      </div>
      <div class="icon-con">
        <img
          :src="require('../assets/img/topView.png')"
          alt="俯视图"
          title="俯视图"
          @click="toTopClick()"
        />
      </div>
      <div class="icon-con">
        <img
          :src="require('../assets/img/savePicture.png')"
          alt="保存为图片"
          title="保存为图片"
          @click="toSaveClick()"
        />
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from "../utils/EventBus";
import {
  SET_VIEW_TO_ALL,
  SET_VIEW_TO_FRONT,
  SET_VIEW_TO_RIGHT,
  SET_VIEW_TO_TOP,
  SET_SAVE_TO_PICTURE,
} from "../utils/EventBus/events";

export default {
  name: "view-switch",
  data() {
    return {};
  },
  methods: {
    toAllClick() {
      eventBus.$emit(SET_VIEW_TO_ALL);
    },
    toFrontClick() {
      eventBus.$emit(SET_VIEW_TO_FRONT);
    },
    toRightClick() {
      eventBus.$emit(SET_VIEW_TO_RIGHT);
    },
    toTopClick() {
      eventBus.$emit(SET_VIEW_TO_TOP);
    },
    toSaveClick() {
      eventBus.$emit(SET_SAVE_TO_PICTURE);
    },
  },
};
</script>

<style scoped>
.ViewSwitch {
  padding: 8px 12px;
}
.title {
  padding: 0 0 10px;
}
.icons {
  display: flex;
  gap: 8px;
}
.icon-con {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 2px;
  border: black dashed 1px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 600ms linear;
}
.icon-con:hover {
  border-style: solid;
  background-color: rgb(211, 255, 255);
}
img {
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
</style>
